<template>
  <div class="app-container">
    <el-row>
    <el-col :span="22" :offset="1">
    <template >
        <el-button type="primary" class="el-icon-plus" @click="addSysDept()">添加</el-button>   
    </template>
    <el-table
        :data="dept"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
       :default-expand-all="false"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
       prop="id"
       label="ID"
       align="center">
    </el-table-column>
    <el-table-column
       prop="name"
       label="部门名称"
       align="center">
    </el-table-column>
    <el-table-column
      prop="sysDept.name"
      label="上级部门"
      align="center">
    </el-table-column>
     <el-table-column
      prop="orderNum"
      label="排序"
      align="center"
      width="132">
    </el-table-column>
     <el-table-column
      prop="createBy"
      label="创建人"
      align="center"
      width="182">
    </el-table-column>
     <el-table-column
      label="创建时间"
      align="center">
    <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.createTime | longDateFormat}}</span>
    </template>
         </el-table-column>
         <el-table-column
          label="操作"
          align="center"
          width="182">
       <template slot-scope="scope">
         <el-button  type="info"  size="mini" icon="el-icon-message" @click="editSysDept(scope.row.name,scope.row.parentId,scope.row.orderNum,scope.row.id)">编辑</el-button>
         <el-button type="danger"  size="mini" icon="el-icon-delete" @click="deleteSysDept(scope.row.id)">删除</el-button>
      </template>
  </el-table-column>
  </el-table>
  </el-col>
   <add-dept ref="addDept" @refresh="showDept" ></add-dept>
   <edit-dept ref="editDept" @refresh="showDept"></edit-dept>
  </el-row>
  </div>
</template>

<script>


import addDept from '@/views/department/addDept.vue'
import editDept from '@/views/department/editDept.vue'
export default {  
   components:{
      addDept,
      editDept
   },
    data(){
      return{
        dept:[], 
              
        isShowAddDept:false,
        isShowEitpDept:false,

      }
    },
    mounted(){
       this.showDept()
    },
    methods:{
       addSysDept(){
           try{
            this.$refs.addDept.getdept()
            this.$refs.addDept.isShowAddDept = true                   
            }catch(err){
              console.log(err)
            }
       },
       showDept(){
          this.$http.get('dept')
         .then(res=>this.dept=res.data.data) 
       },
       editSysDept(name,parentId,orderNum,id){ 
          this.$refs.editDept.getEditdept()
          this.$refs.editDept.dept={name:name,parentId:parentId,orderNum:orderNum,id:id}
          this.$refs.editDept.isShowEditDept = true
     },
      async deleteSysDept(id){
        try{
         await  this.$confirm('是否删除', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
        })
       const r=await this.$http.delete(`/dept/${id}`)
       if(r.data.code==1){
            this.$message({
            type: 'success',
            message: '删除成功!'
          })
         this.showDept()
       }
         
        }catch(err){
           this.$message({
            type: 'success',
            message: '取消删除!'
          })
         console.log(err)
        }
            
    
        }
    }
}
</script>

<style>

</style>
